<template>
  <a-spin :spinning="spinning">
    <div class="all_page">

      <div class="header">
        <img
          :src="state.infoDetail.user_info[0].avatar ? 'https://hzh.woide.top' + state.infoDetail.user_info[0].avatar : 'https://cdn.pixabay.com/photo/2016/11/02/11/08/monk-1791113_640.jpg'"
          alt="" />

        <span class="info">
          <h4>{{ state.infoDetail.user_info[0].username || '暂无数据' }}</h4>
          <p>发布时间： {{ sliceString(state.infoDetail.updated_at) }}</p>
          <p>
            求助地点：<span class="address">
              {{
                addressChangeCallback(
                  state.infoDetail.pu_province_id,
                  state.infoDetail.pu_city_id,
                  state.infoDetail.pu_district_id
                )
              }}</span>
          </p>
          <!-- <a-cascader  v-model="addressList"  :options="proxyCityData" 
        :fieldNames="{ label: 'name', value: 'code', children: 'children' }" @change="addressChangeCallback" /> -->
          <p>结束时间：{{ sliceString(state.infoDetail.pu_finish_time) }}</p>
          <p>发布人手机号：{{ formartMobile(state.infoDetail.user_info[0].mobile) }}</p>
        </span>
        <div class="confirm_btn" v-if="PMwidth">
          <a-button type="primary" v-if="state.infoDetail.pu_type == '1' && state.infoDetail.pu_userId != userInfo.id"
            block size="large" @click="isConfirmHanlde">确认接单</a-button>
          <a-button type="primary" v-else block size="large" disabled @click="isConfirmHanlde">确认接单</a-button>
        </div>
      </div>
      <div class="body">
        <div class="title">
          <h2>{{ state.infoDetail.pu_title }}</h2>
        </div>
        <div class="explain">
          {{ state.infoDetail.pu_description }}
        </div>
        <div class="swiper">
          <a-carousel class="h-50" arrows>
            <template #prevArrow>
              <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                <LeftCircleOutlined />
              </div>
            </template>
            <template #nextArrow>
              <div class="custom-slick-arrow" style="right: 10px">
                <right-circle-outlined />
              </div>
            </template>
            <div v-for="item of formartImg(state.infoDetail.pu_order_screenshot)" :key="item">
              <ConfigProvider :locale="zhCN">
                <a-image :src="item" :height="210" :placeholder="true" />"
              </ConfigProvider>
              <!-- <img src="https://hzh.woide.top/app/admin/upload/img/20240708/668be0a93714.jpg" alt=""> -->
            </div>
          </a-carousel>
        </div>
      </div>
      <div class="footer" v-if="!PMwidth">
        <a-button type="primary" v-if="state.infoDetail.pu_type == '1' && state.infoDetail.pu_userId != userInfo.id"
          block size="large" @click="isConfirmHanlde">确认接单</a-button>
        <a-button type="primary" v-else block size="large" disabled @click="isConfirmHanlde">确认接单</a-button>
      </div>
      <ConfigProvider :locale="zhCN">
        <a-modal v-model:open="isConfirm" title="确认接单?" @ok="handleOk" cancelText="取消" okText="确定" centered>
        </a-modal>
      </ConfigProvider>
    </div>
  </a-spin>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import {
  UserOutlined,
  LeftCircleOutlined,
  RightCircleOutlined,
  DownOutlined,
  ArrowRightOutlined,
  FileDoneOutlined,
  DollarOutlined,
  AlipayCircleOutlined,
  EditOutlined,
} from "@ant-design/icons-vue";
import type { CascaderProps } from "ant-design-vue";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import {
  getPublishDetails,
  publishOperate,
  publishStatus,
} from "@/api/mutualaid/index";
import cityData from "@/data/city/index.js";
const userInfo = reactive(
  JSON.parse(window.localStorage.getItem("userInfo") || "{}")
);

const spinning = ref<boolean>(true);
interface State {
  infoDetail: {
    avatar: string;
    username: string;
    pu_type?: number; // 添加 pu_type 属性，允许它可能是 undefined
  }[];
  //   // 其他属性...

}
const state = reactive<any>({
  infoDetail: {
    user_info: [
      {
        avatar: '',
        username: "",
        mobile: ""
      }
    ],
  }
});

const PMwidth = ref(document.body.clientWidth > 800 ? true : false);

const router = useRouter();

const idState = ref(router.currentRoute.value.query.id ? true : false);

const proxyCityData = ref(cityData);

const isConfirm = ref<boolean>(false);
const sliceString = (str: string): string | void => {
  if (str) {
    return str.substring(0, 10);
  }

}
const formartMobile = (mobile: string) => {
  if (router.currentRoute.value.query.mobile != '0') {
    return mobile;
  }
  return mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
}
const addressChangeCallback = (
  pu_province_id: string,
  pu_district_id: string,
  pu_tip: string
): string => {
  var address: any[] = [];

  proxyCityData.value.map((addressItem: { code: string; name: any; children: any[]; }) => {
    if (addressItem.code == pu_province_id + "") {
      address.push(addressItem.name);
      addressItem.children.map((addressChildren: { code: string; name: any; children: any[]; }) => {
        
        if (addressChildren.code == pu_district_id + "") {
          address.push(addressChildren.name);
          addressChildren.children.map((item: { code: string; name: any; }) => {
            if (item.code == pu_tip + "") {
              address.push(item.name);
            }
          });
        }
      });
    }
  });
  return address.join("-");
};

const isConfirmHanlde = () => {
  isConfirm.value = true;
};
const handleOk = async () => {
  const res = await publishStatus({
    id: router.currentRoute.value.query.id,
    pu_type: 2,
  });
  isConfirm.value = false;
  if (res.data.code != 0) {
    return message.error({
      content: res.data.msg,
    });
  }
  getInfoDetail();
  message.success({
    content: "接单成功",
  });
};

if (!idState.value) {
  router.push({
    path: "/404",
  });
}
const formartImg = (imglist: string): any => {
  if (imglist === undefined) {
    return "";
  }

  const newimgList = [] as any[];



  return imglist.split(",");
};
onMounted(() => {
  getInfoDetail();
});

const getInfoDetail = async () => {
  const res = await getPublishDetails({
    id: router.currentRoute.value.query.id,
  });

  if (res.data.code != 0)
    return message.error({
      content: res.data.msg,
    });
  state.infoDetail = res.data.data;
  spinning.value = false;
};
</script>

<style lang="scss" scoped>
:deep(.slick-slide) {
  text-align: center;
  height: 210px;
  line-height: 210px;
  background: #364d79;
  overflow: hidden;
}

:deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  transition: ease all 0.3s;
  opacity: 0.3;
  z-index: 1;
}

:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}

:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 0.5;
}

:deep(.slick-slide h3) {
  color: #fff;
}

.all_page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;

  .header {
    position: relative;
   max-height: 202px;

    img {
      vertical-align: top;
      border-radius: 50%;
      width: 70px;
      height: 70px;
    }

    .info {
      display: inline-block;
      overflow: hidden;
      margin-left: 20px;
      width: 60%;
      font-size: 15px;

      h4 {
        margin: 0;
      }

      p {
        margin: 0;

        .address {
          color: #000;
          font-weight: 700;
        }
      }
    }

    .confirm_btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 30px;
    }
  }

  .body {
    margin-top: 30px;

    .title {}

    .swiper {
      margin-top: 30px;
    }
  }

  @media screen and (max-width: 600px) {

    /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
    .footer {
      margin-top: 30px;
      width: 100%;
    }
  }

  @media screen and (min-width: 1200px) {

    /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
    .footer {
      width: 50%;
      margin: 0 auto;
      margin-top: 30px;
    }
  }
}
</style>